<template>
    <body id="poster">
        <el-form class="login-container" label-position="left" label-width="0px" :model="loginForm" :rules="rules"
            ref="loginFormRef">
            <h3 class="login_title">欢迎使用超市管理系统</h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="用户名 / 手机号">
                    <template slot="prepend"><i class="el-icon-user-solid"></i></template>
                </el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码" show-password>
                    <template slot="prepend"><i class="el-icon-lock"></i></template>
                </el-input>
            </el-form-item>

            <el-form-item prop="verifyCode" class="verifyCodeItemCss">
                <el-input class="verify_css" style="width: 53%;" placeholder="请输入4位验证码" v-model="loginForm.verifyCode">
                    <template slot="prepend"><i class="el-icon-picture-outline-round"></i></template>
                </el-input>
                <!--关键 ↓-->
                <div id="v_container"></div>

            </el-form-item>

            <el-form-item style="width: 100%">
                <el-button type="primary" style="width: 100%;border: none" @click="loginSubmit">登录</el-button>
            </el-form-item>
        </el-form>
    </body>
</template>

<script>
import { loginRequest } from '@/api/user'
import { getMenu } from '@/api/person'
import { GVerify } from '@/utils/verifyCode'
import Cookie from 'js-cookie'

export default {
    name: "login",
    data() {
        return {
            loginForm: {
                username: 'admin',
                password: '24680abc',
                verifyCode: ''
            },
            rules: {
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ],
                verifyCode: [
                    { required: true, message: "请输入验证码", trigger: "blur" }
                ]
            },
            verifyCode: null
        }
    },
    methods: {
        loginSubmit() {
            this.$refs.loginFormRef.validate((valid) => {
                //  判断验证是否输入正确
                var verifyFlag = this.verifyCode.validate(this.loginForm.verifyCode)
                console.log(verifyFlag)
                if (!verifyFlag) {
                    this.$notify.error({
                        title: '系统提示',
                        message: '验证码输入错误'
                    })
                    return;
                }
                if (!valid) {
                    this.warningMsg('用户名或密码不能为空')
                } else {
                    const loginInfo = {
                        username: this.loginForm.username,
                        password: this.loginForm.password
                    }
                    loginRequest(loginInfo).then((res) => {
                        if (res.data.code == 20041) {
                            //  将当前登录时间保存
                            const currentTime = new Date().toLocaleString();
                            localStorage.setItem('lastLoginTime', currentTime);

                            // 设置 Cookie 的过期时间为3小时
                            const expirationTime = 3 * 60 * 60; // 3小时的秒数

                            Cookie.set('userInfo',JSON.stringify(res.data.data),{ expires: expirationTime })

                            this.successMsg(res.data.msg)
                            this.$router.replace('/home')
                        }
                        else {
                            this.warningMsg(res.data.data)
                        }
                    }).catch(() => {
                        this.warningMsg('服务器出现故障，请稍后重试')
                    })
                }
            });


        },
        //  成功消息提示
        successMsg(msg) {
            this.$message({
                message: msg,
                type: 'success',
                duration: 6500
            });
        },
        //  错误消息提示
        warningMsg(msg) {
            this.$message({
                message: msg,
                type: 'warning',
                duration: 2500
            });
        }
    },
    mounted() {
        this.verifyCode = new GVerify('v_container')
    }
}
</script>

<style>
#poster {
    background: url(../assets/images/超市管理系统背景.jpeg);
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
}

body {
    margin: 0px;
    padding: 0;
}

.login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px 850px;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}

.login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}

#v_container {
    width: auto;
    height: auto;
    display: inline-flex;
    position: relative;
    top: 1rem;
    margin-top: -2rem;
}
</style>
